<template>
    <div class="demo-input-size">
      <el-input
        size="medium"
        placeholder="请输入内容"   
        v-model="inputValue"
        @focus="dialogVisible = true"
        >
      </el-input>
     <el-dialog
        title="计算器"
        :visible.sync="dialogVisible"
        width="360px"
        :before-close="handleClose">
       <operator @result="inputChange"></operator> 
      </el-dialog>
     

    </div>
</template>

<script>
import operator from "@/components/operator";

export default {
  name: "index",
  components: {
    operator
  },
  data() {
    return {
      inputValue: "123",
      dialogVisible: false
    };
  },
  methods: {
    handleClose(done) {
      done();
    },
    inputChange(val) {
      this.inputValue = val;
    }
  },
  mounted() {}
};
</script>
<style>
.el-input--medium {
  width: 30%;
  display: inline-block;
}
.el-input__inner {
  text-align: right;
}
</style>
